<!doctype html>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
$(function(){
    var makeDraggable = function() {
        return $('<div></div>')
        .attr('draggable', 'true')
        .css({width: 100, height: 100, cursor: 'pointer', margin:10, float: 'left',
            //http://paulirish.com/2009/random-hex-color-code-snippets/
            'background-color' : '#'+Math.floor(Math.random()*16777215).toString(16)})
        .bind("dragstart", function(e){
            e.originalEvent.dataTransfer.setData('Text', $(this).attr('id'));
        });
    };

    var iframes = $('iframe');
    iframes.each(function() {
		var iframe = this;
        var body = $(this).contents().find('body').width(800).height(120);
        
		body.bind('dragover', function(e){e.preventDefault()})
		
        body.bind('drop', function(e){
            e.preventDefault();
            var id = e.originalEvent.dataTransfer.getData('Text');
			iframes.each(function() {
				if(this == iframe) return true; //skip drag/drops in the same iframe
                var draggable = $(this).contents().find("#"+id);
                if(draggable.length == 1) {
                    draggable.fadeOut(200, function(){$(this).appendTo(body).fadeIn(200)});
					var xhr = $.post('/api', {"id": id}, "json")
                        .done(function(data){
                            console.log("Server says:", data.message);
                        });
					xhr.always(function(){
						console.log("Server Status:", xhr.status);
						console.log("Id:", draggable.attr('id'));
                        console.log("Background color:", draggable.css('background-color'));
                        console.log(" ");
					})
                    return false;
                }
            })
        })
		
        for(var a = 0; a < 4; a++) {
            var id = $(this).attr('id')+"-"+a;
            body.append(makeDraggable().text(id).attr('id', id));
        }
    })
})
	</script>
</head>
<body>
<iframe id="iframe0" width="820px" height="140px"></iframe>
<iframe id="iframe1" width="820px" height="140px"></iframe>
<iframe id="iframe2" width="820px" height="140px"></iframe>
<iframe id="iframe3" width="820px" height="140px"></iframe>
</body>
</html>